<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">执行结果详情</h2>
      <p class="text-gray-400">查看单个测试用例的详细执行结果</p>
    </div>
    
    <div class="space-y-6">
      <!-- 用例基本信息 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4">测试用例: API响应时间测试</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm text-gray-400 mb-1">执行状态</label>
            <span class="flex items-center text-red-400">
              <i class="fas fa-times-circle mr-2"></i>失败
            </span>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">执行时间</label>
            <p class="text-white">5.2秒</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">开始时间</label>
            <p class="text-white">2024-01-15 10:35:20</p>
          </div>
        </div>
      </div>

      <!-- 错误详情 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-exclamation-triangle mr-2 text-red-400"></i>错误详情
        </h3>
        <div class="bg-red-900/20 border border-red-500/30 rounded-lg p-4">
          <h4 class="text-red-400 font-semibold mb-2">TimeoutError</h4>
          <p class="text-gray-300 mb-4">API请求超时，响应时间超过5秒阈值</p>
          <div class="bg-gray-900 rounded p-3 font-mono text-sm text-red-300">
            <div>requests.exceptions.Timeout: HTTPSConnectionPool(host='api.test.com', port=443):</div>
            <div>Read timed out. (read timeout=5)</div>
            <div>at line 45 in test_api_response_time()</div>
          </div>
        </div>
      </div>

      <!-- 执行日志 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-file-alt mr-2"></i>执行日志
        </h3>
        <div class="bg-gray-900 rounded-lg p-4 border border-gray-600 h-64 overflow-y-auto">
          <div class="font-mono text-sm space-y-1">
            <div class="text-gray-400">[10:35:20] 开始执行 API响应时间测试</div>
            <div class="text-blue-400">[10:35:20] 初始化 HTTP 客户端</div>
            <div class="text-blue-400">[10:35:21] 发送 GET 请求到 /api/users</div>
            <div class="text-yellow-400">[10:35:23] 等待响应...</div>
            <div class="text-yellow-400">[10:35:25] 响应时间超过 3s 警告</div>
            <div class="text-red-400">[10:35:26] 请求超时，响应时间: 5.2s</div>
            <div class="text-red-400">[10:35:26] 测试失败: 超出阈值</div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex justify-between items-center">
        <div class="flex space-x-4">
          <button class="cyber-button px-4 py-2 text-white rounded-lg">
            <i class="fas fa-redo mr-2"></i>重新执行
          </button>
          <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
            <i class="fas fa-download mr-2"></i>下载日志
          </button>
        </div>
        <router-link 
          to="/task/results"
          class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
        >
          返回列表
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 任务执行结果详情页面
</script>

